<!-- 页脚 -->
<template>
    <div class="footer">
        <ul class="list">
            <li class="lisst_item">企业团购</li>
            <li class="lisst_item">设计师款</li>
            <li class="lisst_item">同城鲜花</li>
            <li class="lisst_item">花语大全</li>
            <li class="lisst_item">花礼优势</li>
            <li class="lisst_item">勇敢爱</li>
            <li class="lisst_item">常见问题</li>
            <li class="lisst_item">关于我们</li>
        </ul>
        <div class="icon">
            <div>
                <van-icon class="icon" name="bill-o" />
                <p>客户端</p>
            </div>
            <div>
                <van-icon class="icon" name="service-o" />
                <p>客服</p>
            </div>
        </div>
        <div class="text">
            <p>Copyright &copy; 2005~2022花礼网(Hua.com）版权所有</p>
            <p>中国知名的鲜花礼品网，品牌鲜花网服务，鲜花速递专家！</p>
            <p>用户协议│隐私政策版本:V4.1.3</p>
        </div>
    </div>
</template>

<script>
export default {
    name: "Footer"
}
</script>
<style scoped lang="less">
.footer {
    margin-top: .24rem;
    padding-bottom: .49rem;
    background: #fff;
}

.list {
    padding: .4rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .lisst_item {
        width: 20%;
        padding: .08rem;
        background: #E9ECF0;
        font-size: 0.24rem;
        text-align: center;
        margin-bottom: .2rem;
    }
}

.icon {
    display: flex;
    justify-content: center;

    div {
        margin: 0 .27rem;
        text-align: center;

        .icon {
            font-size: .45rem;
            background: #E9ECF0;
            padding: .15rem;
            border-radius: 50%;
        }

        ;

        p {
            padding-top: .08rem;
            font-size: .24rem;

        }
    }
}

.text {
    padding: 0.28rem 0;

    font-size: 0.2rem;
    color: #B4BABF;
    text-align: center;

    p {
        padding: 0.08rem 0;
    }
}
</style>